<template>
  <div class="app-container" align="center" style="width: 1300px">
    <div :style="{width: '90%'}">
      <el-row type="flex" justify="start" align="top">
        <el-col :span="12">
          <div align="center">
            <el-collapse v-model="activeNames" @change="handleChange" accordion>
              <el-collapse-item title="一级人脉" name="1">
                <el-card :hidden = "!firstHidden" style="width: 420px"  shadow="hover">
                  <div class="text-nickName">
                    无一级人脉
                  </div>
                </el-card>
                <div align="right">
                  <el-table
                    :hidden="firstHidden"
                    :show-header = "false"
                    ref="tableList"
                    v-loading="listLoading"
                    :data="datalist"
                    max-height="400px"
                    style="width: 95%"
                    :border="true"
                    :highlight-current-row="true"
                  >
                    <el-table-column align="center">
                      <template slot-scope="scope">
                        <el-row type="flex" justify="start" align="top">
                          <el-col :span="5">
                            <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                          </el-col>
                          <el-col :span="10">
                            <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                            <div class="text-brief" align="start">{{scope.row.signature}}</div>
                          </el-col>
                          <el-col :span="9">
                            <el-tooltip class="item" effect="dark" content="名片" placement="bottom">
                              <el-button icon="el-icon-user" @click="showCardDialog(scope.row, 'friend')" circle></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="共同人脉圈" placement="bottom">
                              <el-button icon="el-icon-chat-square" @click="showNetwork(scope.row.id)" circle></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                              <el-button icon="el-icon-delete" @click="removeDataById(scope.row.id)" circle></el-button>
                            </el-tooltip>
                          </el-col>
                        </el-row>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item title="二级人脉" name="2">
                <el-card :hidden = "!secondHidden" style="width: 420px"  shadow="hover">
                  <div class="text-nickName">
                    无二级人脉
                  </div>
                </el-card>
                <div align="center">
                  <el-table
                    :hidden="secondHidden"
                    :show-header = "false"
                    ref="secondList"
                    v-loading="secondLoading"
                    :data="secondList"
                    max-height="400px"
                    style="width: 95%"
                    :border="true"
                    :highlight-current-row="true"
                  >
                    <el-table-column align="center">
                      <template slot-scope="scope">
                        <el-row type="flex" justify="start" align="top">
                          <el-col :span="5">
                            <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                          </el-col>
                          <el-col :span="10">
                            <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                            <div class="text-brief" align="start">{{scope.row.signature}}</div>
                          </el-col>
                          <el-col :span="9">
                            <el-tooltip class="item" effect="dark" content="名片" placement="bottom">
                              <el-button icon="el-icon-user" @click="showCardDialog(scope.row, 'friend')" circle></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="共同人脉圈" placement="bottom">
                              <el-button icon="el-icon-chat-square" @click="showNetwork(scope.row.id)" circle></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                              <el-button icon="el-icon-delete" @click="removeDataById(scope.row.id)" circle></el-button>
                            </el-tooltip>
                          </el-col>
                        </el-row>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
              <el-collapse-item title="三级人脉" name="3">
                <el-card :hidden = "!isThirdHidden" style="width: 420px"  shadow="hover">
                  <div class="text-nickName">
                    无三级人脉
                  </div>
                </el-card>
                <div align="center">
                  <el-table
                    :hidden="isThirdHidden"
                    :show-header = "false"
                    ref="tableList"
                    v-loading="thirdLoading"
                    :data="thirdList"
                    max-height="400px"
                    style="width: 95%"
                    :border="true"
                    :highlight-current-row="true"
                  >
                    <el-table-column align="center">
                      <template slot-scope="scope">
                        <el-row type="flex" justify="start" align="top">
                          <el-col :span="5">
                            <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                          </el-col>
                          <el-col :span="10">
                            <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                            <div class="text-brief" align="start">{{scope.row.signature}}</div>
                          </el-col>
                          <el-col :span="9">
                            <el-tooltip class="item" effect="dark" content="名片" placement="bottom">
                              <el-button icon="el-icon-user" @click="showCardDialog(scope.row, 'friend')" circle></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="共同人脉圈" placement="bottom">
                              <el-button icon="el-icon-chat-square" @click="showNetwork(scope.row.id)" circle></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                              <el-button icon="el-icon-delete" @click="removeDataById(scope.row.id)" circle></el-button>
                            </el-tooltip>
                          </el-col>
                        </el-row>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-col>

        <el-col :span="8">
          <div align="center">
            <el-card
              :hidden = "isNetHidden"
              class="friend-card"
              align="center"
              shadow="hover"
              :style="{marginLeft: '10px'}"
            >
              <div align="center">
                <el-table
                  ref="networkList"
                  v-loading="netLoading"
                  max-height="380px"
                  :data="netList"
                  style="width: 100%"
                >
                  <el-table-column label="共同人脉圈" align="center">
                    <template slot-scope="scope">
                      <el-row type="flex" justify="start" align="top">
                        <el-col :span="12">
                          <div class="text-nickName" align="center">标题</div>
                          <div class="text-netTitle" align="center">{{scope.row.title}}</div>
                        </el-col>
                        <el-col :span="12">
                          <div class="text-nickName" align="center">类型</div>
                          <div class="text-brief" align="center">{{scope.row.type}}</div>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>

    </div>

    <!-- 对话框 -->
    <el-dialog title="选择人脉" :visible.sync="dialogVisible" width="400px">
      <!-- 内容主体 -->
      <div align="center">
        <el-card class="friend-card" align="center" shadow="hover">
          <div align="center">
            <div :style="{width: '100%'}">
              <p :style="{width: '15%', float: 'left'}">昵称：</p>
              <el-input v-model="chooseFriend.nickName" placeholder="请输入" size="small" clearable
                        :style="{width: '58%', float: 'left'}">
              </el-input>
              <el-button icon="el-icon-search" type="primary" size="small" @click="getDataList()"
                         :style="{marginLeft: '1px', float: 'left'}" round>查询
              </el-button>
            </div>
          </div>
          <div align="center">
            <el-table
              ref="chooseTableList"
              v-loading="chooseListLoading"
              :data="chooseList"
              style="width: 100%"
              @row-click="rowRecommendClick"
            >
              <el-table-column label="人脉列表" align="center">
                <template slot-scope="scope">
                  <el-row type="flex" justify="start" align="top">
                    <el-col :span="5">
                      <el-avatar :size="medium" :src="scope.row.avatar"></el-avatar>
                    </el-col>
                    <el-col :span="19">
                      <div class="text-nickName" align="start">{{scope.row.nickName}}</div>
                      <div class="text-brief" align="start">{{scope.row.signature}}</div>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination-container">
            <el-pagination
              :style="{width: '100%'}"
              background
              layout="prev, pager, next"
              :page-size="chooseFriend.pageSize"
              :current-page.sync="chooseFriend.pageNum"
              :total="chooseFriend.total"
              @size-change="handleChooseSizeChange"
              @current-change="handleChooseCurrentChange"
            />
          </div>
        </el-card>
      </div>
    </el-dialog>
    <!-- 对话框 -->
    <el-dialog title="名片" :visible.sync="cardDialogVisible" width="700px" @close="cardDialogVisible = false">
      <!-- 内容主体 -->
      <div align="center">
        <el-card class="friend-card" align="center" shadow="hover">
          <div class="block">
            <el-avatar :size="80" :src="cardInfo.avatar"></el-avatar>
          </div>
          <div style="padding: 14px;">
            <div class="text-nickName" :style="{marginBottom: '10px'}">{{cardInfo.nickName}}</div>
            <div class="text-brief-long">{{cardInfo.signature}}</div>
            <el-tag size="small" type="success" class="card-tag">{{cardInfo.profession}}</el-tag>
            <el-tag size="small" class="card-tag">{{ cardInfo.gender === 1 ? '男' : '女' }}</el-tag>
            <div class="text-info">职业：{{cardInfo.profession}}</div>
            <div class="text-info">生日：{{cardInfo.birthday}}</div>
            <div class="text-info">手机：{{cardInfo.phone}}</div>
            <div class="text-info">邮箱：{{cardInfo.email}}</div>
            <div slot="footer" align="center">
              <el-button v-if="this.type === 'friend'" type="primary" round size="small" @click="showDialog(cardInfo.id)">推荐给其他好友</el-button>
              <el-button v-if="this.type === 'friend'" type="danger" round size="small" @click="removeDataById(cardInfo.id)">删除好友</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import {mapGetters} from "vuex";

export default {
  computed: {
    ...mapGetters([
      'name',
      'id',
      'user'
    ])
  },
  data() {
    return {
      activeNames: ['1'],
      keyword: "nickName",
      rules: {
        keyword: [{
          required: true,
          message: '请选择',
          trigger: 'change'
        }],
        queryInfo: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
        chooseFriend: [{
          required: true,
          message: '请输入',
          trigger: 'blur'
        }],
      },
      recommendedID: '',
      keywordOptions: [{
        "label": "昵称",
        "value": "nickName"
      }, {
        "label": "账号",
        "value": "account"
      }],
      type: '',
      cardInfo: {},
      // 获取好友列表查询参数对象
      queryInfo: {
        id: '',
        total: 1,
        pageNum: 1,
        pageSize: 8
      },
      secondParam: {
        id: '',
        total: 1,
        pageNum: 1,
        pageSize: 8
      },
      thirdParam: {
        id: '',
        total: 1,
        pageNum: 1,
        pageSize: 8
      },
      chooseFriend: {
        id: '',
        nickName: '',
        account: '',
        total: 1,
        pageNum: 1,
        pageSize: 8
      },
      firstHidden: true,
      secondHidden: true,
      isNetHidden: true,
      isThirdHidden: true,
      datalist: [],
      netList: [],
      secondList: [],
      thirdList: [],
      chooseList: [],
      listLoading: false,
      secondLoading: false,
      netLoading: false,
      thirdLoading: false,
      chooseListLoading: false,
      // 对话框
      dialogVisible: false,
      cardDialogVisible: false,

    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    handleChange(val) {
      console.log(val);
      this.isNetHidden = true
      if (val === '1') {
        this.getDataList()
      }
      if (val === '2') {
        this.getSecondList()
      }
      if (val === '3') {
        this.getThirdList()
      }
    },
    getDataList() {
      this.firstHidden = false
      this.listLoading = true
      const params = this.queryInfo
      params.id = this.user.id
      params.rank = 1
      request({
        url: '/friend/pageRank',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') {
          this.firstHidden = true
          return
        }
        this.datalist = response.data.records
        this.queryInfo.total = response.data.total
        this.listLoading = false
      })
    },
    getSecondList() {
      this.secondHidden = false
      this.secondLoading = true
      const params = this.secondParam
      params.id = this.user.id
      params.rank = 2
      request({
        url: '/friend/pageRank',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') {
          this.secondHidden = true
          return
        }
        this.secondList = response.data.records
        this.secondParam.total = response.data.total
        this.secondLoading = false
      })
    },
    getThirdList() {
      this.isThirdHidden = false
      this.thirdLoading = true
      const params = this.thirdParam
      params.id = this.user.id
      params.rank = 3
      request({
        url: '/friend/pageRank',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') {
          this.isThirdHidden = true
          return
        }
        this.thirdList = response.data.records
        console.log(response.data)
        this.thirdParam.total = response.data.total
        this.thirdLoading = false
      })
    },
    // 显示共同人脉圈
    showNetwork(id) {
      this.getNetList(id)
    },
    getNetList(id) {
      this.isNetHidden = false
      this.netLoading = true
      const params = {}
      params.userId = this.user.id
      params.friendId = id
      request({
        url: '/friend/getSameNetwork',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') {
          this.isNetHidden = true
          return this.$message.warning(response.retMsg)
        }
        this.netList = response.data
        this.netLoading = false
      })
    },
    getChooseList(reid) {
      this.chooseListLoading = true
      const params = this.chooseFriend
      params.id = this.user.id
      params.recommendedId = reid
      request({
        url: '/friend/page',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') {
          this.dialogVisible = false
          return this.$message.warning(response.retMsg)
        }
        this.chooseList = response.data.records
        this.chooseFriend.total = response.data.total
        this.chooseListLoading = false
      })
    },
    handleResetSearch() {
      this.queryInfo['query'] = {}
      this.getDataList()
    },
    // 显示对话框
    showCardDialog(row, str) {
      this.cardInfo = row
      this.type = str
      this.cardDialogVisible = true
    },
    // 选择推荐指向的好友
    showDialog(id) {
      this.recommendedID = id
      this.dialogVisible = true
      this.getChooseList(this.recommendedID)

    },
    async rowRecommendClick(row, column, event){

      const confirmResult = await this.$confirm(
        '确定向该好友推荐吗?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult === 'confirm') {
        const params = {}
        params.userId = this.user.id
        params.recommendId = this.cardInfo.id
        params.friendId = row.id
        params.reference = this.user.nickName
        params.recommendRank = this.user.nickName
        params.recommendRank = this.cardInfo.rank
        params.toRank = row.rank
        request({
          url: '/recommend/sendRecommend',
          method: 'get',
          params
        }).then(response => {
          console.log("发送请求")
          console.log(response.retCode)
          if (response.retCode !== '200') return this.$message.error(response.retMsg)
          this.$message.success('发送请求成功！')
          this.getDataList()
          this.dialogVisible = false
          this.cardDialogVisible = false
        })
      }

    },

    // 删除
    async removeDataById(id) {
      const confirmResult = await this.$confirm(
        '此操作将删除该好友, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }
      const params = {}
      params.userId = this.user.id
      params.friendId = id
      request({
        url: '/friend/delete',
        method: 'get',
        params
      }).then(response => {
        if (response.retCode !== '200') return this.$message.error('删除人脉失败！')
        this.$message.success('删除人脉成功！')
        this.getDataList()
        this.getSecondList()
        this.getThirdList()
        this.cardDialogVisible = false
      })
    },

    handleChooseSizeChange(newSize) {
      // console.log(newSize)
      this.chooseFriend.pageSize = newSize
      this.getChooseList(this.recommendedID)
    },

    handleChooseCurrentChange(newSize) {
      // console.log(newSize)
      this.chooseFriend.pageNum = newSize
      this.getChooseList(this.recommendedID)
    },


  }
}
</script>

<style lang="scss" scoped>

</style>
